<template>
    <div class="process-monitoring-box">
        <commpVxeTable
         :key="dataTableKey"
         :config="dataTableConfig" 
         :columns="columnsVxe" 
         :formItem="formItem"
         :conditionBtnRow="true"
         :searchType="true"
         ref="acceptanceRegistrationRef"
         @checkboxChange="selectedRowKeysChange"
         @searchEvent="searchEvent"
         @resetEvent="resetEvent"
         :isCanWrap="true"
         >
            <template v-slot:gznxks_name="{data}">
                <!-- :style="{width:data.widthString}" -->
                <div :style="{width:data.widthStringT}" style="display: flex;align-items: center;">
                    <a-input-number style="flex: 1;" id="inputNumber" placeholder="开始年限" v-model="nxData.gznxks" @change="nxChange" :min="0" :precision="0"/>
                    <span>-</span>
                    <a-input-number style="flex: 1;" id="inputNumber" placeholder="结束年限" v-model="nxData.gznxjs" @change="nxChange" :min="0" :precision="0"/>
                </div>
            </template>
            <template v-slot:flx_name="{data}" >
                <a-tree-select
                    :style="{width: data.widthStringT}"
                    v-modal:value="flxVlaue"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    placeholder="请选择专家分类"
                    allow-clear
                    multiple
                    tree-default-expand-all
                    @change="onChange"
                >
                    <a-tree-select-node v-for="(item,index) in flxList" :key="index+'-'+item.type1" :value="item.type1" :title="item.type1">
                        <a-tree-select-node v-for="(trem,tIndex) in item.type2List" :key="item.type1+'&'+trem" :value="item.type1+'&'+trem" :title="item.type1+'-'+trem">
                        </a-tree-select-node>
                    </a-tree-select-node>
                </a-tree-select>
            </template>
            <template v-slot:externalOperations="{data}">
                <vxe-form-item>
                    <template>
                        <a-button class="blue-btn" type="primary" @click="exportTraining()">导出</a-button>
                    </template>
                </vxe-form-item>
            </template>
            <template v-slot:sex_default="{row}">
                <span>{{ row.sex == 1?'男':'女' }}</span>
            </template>
            <!-- <template v-slot:fjcylb_slotName="{row}">
                <compSelector
                v-model="category"
                :defaultValue="category"
                compType="Checkbox"
                dictionaryType="检查员登记类别"
                @selectHandleChange="($event)=>{dataTableConfig.paramet={...dataTableConfig.paramet,flx:category.length?category.join(','):''}}"
                />
            </template> -->
            <template v-slot:realname_name="{row}">
                <a @click="viewClick(row,true)">
                    <span style="padding-right: 21;" v-if="row.realname.length == 2">
                        <span v-for="(trem,tI) in row.realname.split('')" :key="tI" >
                        {{trem}}
                        <span v-if="tI+1 !== row.realname.split('').length">&nbsp;&nbsp;</span>
                        </span>
                    </span>
                    <span style="padding-right: 21;" v-else>{{ row.realname }}</span>
                </a>
            </template>
            <template v-slot:fgzdw_orgName="{row}">
                {{ row.fgzdw }}/{{ row.fgzdwbm }}
            </template>
            <template v-slot:status_name="{row}">
                {{ row.status == 1?'正常':'冻结' }}
            </template>
            <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                <a-form layout="inline" class="search-form" >
                    <a-form-item >
                        <a-button class="blue-btn" type="primary" @click="modifyClick(row,false)">修改</a-button>
                    </a-form-item>
                    <a-form-item >
                        <a-button class="blue-btn" type="primary" @click="viewClick(row,true)">查看</a-button>
                    </a-form-item>
                </a-form>
            </template>
        </commpVxeTable>
        <increase ref="increaseRef" @successChange="successChange"/>
    </div>
</template>
<script>
import assessCheckApi from './service/api'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import blobType from '@/common/blobType'
import moment from 'moment'
import increase from './increase.vue'
import compSelector from '@/components/compSelector/compSelector.vue'
import { dictzjflDict } from '../accountManage/service/index'
import {
    jcyglexportJcyData,
    jcyglimpJcyFileData,
    jcyglenableAccount,
    jcyglstopAccount,
    jcyglresetPwd,
    jcygldownJcyTemplate,
} from './service/index'
export default {
    components:{
        commpVxeTable,
        increase,
        compSelector,
    },
    props:{

    },
    data(){
        return{
            nxData:{
                gznxks:'',
                gznxjs:'',
            },
            category:[],
            dataTableKey:null,
            addEditParameter:{},
            formItem:[
                // {
                //     label: '账户状态',
                //     model: 'status',
                //     type:'Select',
                //     dictionaryType:'账户状态'
                // },
                // {
                //     label: '账号', 
                //     model: 'username',
                // },{
                {
                    label: '姓名',
                    model: 'realname',
                },{
                    label: '工作单位',
                    model: 'fgzdw',
                },{
                    label: '从事审评工作年限',
                    model: 'gznxks',
                    slotName:'gznxks_name'
                }
                // {
                //     label: '工作年限结束',
                //     model: 'gznxjs',
                //     slotName:'gznxjs_name'
                // },
                
                // {
                //     label: '所属库',
                //     model: 'fssk',
                //     type:'Select',
                //     dictionaryType:'核查员所属库',
                //     searchType:'收起',
                // },
                ,{
                    label: '单位类型',
                    model: 'fdwlx',
                    type:'Select',
                    dictionaryType:'单位类型',
                    searchType:'收起',
                },{
                    label: '性别',
                    model: 'sex',
                    type:'Select',
                    dictionaryType:'性别',
                    searchType:'收起',
                },{
                    label: '学历',
                    model: 'fxl',
                    type:'Select',
                    dictionaryType:'学历代码',
                    searchType:'收起',
                    type:'Checkbox',
                    convert:true,
                },{
                    label: '专家分类',
                    model: 'flx',
                    slotName:'flx_name'
                    
                }],//
            columnsVxe:[
            { 
                type: 'checkbox', 
                width: 60 ,
                fixed: 'left'
            },
            // {
            //     title: '账号', //列头显示文字
            //     field: 'username',
            //     slots: { header:'username_header',default: 'username_name' },
            //     titleInterval:true,
            //     width:100,
            // },
            {
                title: '姓名', //列头显示文字
                field: 'realname',
                slots: { 
                    header:'realname_header',
                    default: 'realname_name'
                },
                titleInterval:true,
                width:90,
            },{
                title: '性别', //列头显示文字
                field: 'sex',
                titleInterval:true,
                slots: {
                    header:'sex_header',
                    default:'sex_default',
                },
                width:70,
            },{
                title: '工作单位/部门',
                field: 'fgzdw',
                slots: { default: 'fgzdw_orgName' },
                
            },
            // {
            //     title: '手机号码', //列头显示文字
            //     field: 'phone',
            //     width:115,
            // },{
            //     title: '身份证号', //列头显示文字
            //     field: 'fsfzh',
            //     width:185,
            // },
            {
                title: '学历', //列头显示文字
                field: 'fxl',
                slots: { header:'fxl_header',},
                titleInterval:true,
                width:115,
            },{
                title: '专业', //列头显示文字
                field: 'fsxzy',
            },{
                title: '职称', //列头显示文字
                field: 'fzc',
                slots: { header:'fzc_header',},
                titleInterval:true,
                width:115,
            },{
                title: '从事审评工作开始时间', //列头显示文字
                field: 'fcsjckssj',
                width:115,
            },{
                title: '专家分类', //列头显示文字
                field: 'flx',
            }
            
            // ,{
            //     title: '账户状态',
            //     field: 'status',
            //     slots: { default: 'status_name' },
            //     width:80,
            // },{
            //     title: '创建时间',
            //     field: 'createTime',
            //     width:152,
            // }
            ],
            dataTableConfig:{
                api: assessCheckApi.list,
                rowId: 'id',
                paramet:{

                }
            },
            selectedRowKeysArr:[],
            searchFrom:{},
            flxVlaue:[],
            flxList:[],
            flxRes:[],
            
        }
    },
    watch:{

    },
    mounted(){
        dictzjflDict().then(res=>{
            if(res.code == 200){
                console.log('我获取到了什么树形',res)
                this.flxList = res.result
            }else{

            }
        })
    },
    methods:{
        nxChange(){
            this.dataTableConfig.paramet={
                ...this.nxData
            }
        },
        searchEvent(searchFrom){//搜索
            this.searchFrom = {...this.dataTableConfig.paramet,...searchFrom,...this.nxData}
        },
        resetEvent(){
            this.flxVlaue = []
            this.flxRes = []
            this.category = []
            this.nxData = {}
            this.dataTableConfig.paramet={flx:''}
            
        },
        selectedRowKeysChange(row){//获取选中表格rowKey
            this.selectedRowKeysArr = []
            row.forEach(item => {
                this.selectedRowKeysArr.push(item.id)
            });
        },
        successChange(){//新增或保存后刷新列表
            this.$refs.acceptanceRegistrationRef.searchEvent()
        },
        //-------------------
        newlyAddedClick(row,val){
            this.$refs.increaseRef.visible = true
            this.$refs.increaseRef.getData(row,val)
        },
        modifyClick(row,val){
            this.$refs.increaseRef.visible = true
            this.$refs.increaseRef.getData(row,val)
        },
        viewClick(row,val){
            this.$refs.increaseRef.visible = true
            this.$refs.increaseRef.getData(row,val)
        },
        beforeUpload(){
            return false
        },
        importTraining({file}){
            var that = this
            if(typeof file.uid !== 'undefined') {
                if(file.name.indexOf(".xls") !== -1 || file.name.indexOf(".xlsx") !==-1) {
                    const fileData = new FormData();
                    fileData.append("file",file);
                    jcyglimpJcyFileData(fileData).then(res => {
                        if(res.code == 200){
                            this.$refs.acceptanceRegistrationRef.searchEvent()
                            this.dataTableKey = Date.now()
                            that.$message.success(res.message)
                        }else{
                            that.$message.warning(res.message)
                        }
                        //console.log(res)
                    }).catch(error =>{
                        that.$message.warning('导入失败')
                    })
                }
                
            }
        },
        exportTraining(){
            var that = this
            var fileName = '审评员账户管理'
            let param = { }
            if(that.selectedRowKeysArr.length){
                param = {
                    ids:that.selectedRowKeysArr.join(','),
                }
            }else{
                param = {...that.searchFrom}
            }
            
            jcyglexportJcyData(param).then((data) => {
                this.leadingOutLoading = false
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
                } else {
                    let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName + '.xls')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                }
            })
        },
        exportTemplate(){
            var fileName = '审评员账户管理模板'
            jcygldownJcyTemplate().then(data=>{
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
                } else {
                    let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName + '.xls')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                }
            })
        },
        deactivateClick(){//停用
            var that = this
            if(this.selectedRowKeysArr.length){
                this.$confirm({
                    title:'确认要停用吗？',
                    // icon: createVNode(ExclamationCircleOutlined),
                    onOk() {
                        jcyglstopAccount({ids:that.selectedRowKeysArr.join(',')}).then(res=>{
                            if(res.code == 200){
                                that.dataTableKey = Date.now()
                                that.$message.success(res.message)
                            }else{
                                that.$message.warning(res.message)
                            }
                        })
                    }
                })
            }else{
                this.$message.warning('请先选择停用项')
            }
        },
        restoreClick(){//恢复
            var that = this
            if(this.selectedRowKeysArr.length){
                this.$confirm({
                    title:'确认要恢复吗？',
                    // icon: createVNode(ExclamationCircleOutlined),
                    onOk() {
                        jcyglenableAccount({ids:that.selectedRowKeysArr.join(',')}).then(res=>{
                            if(res.code == 200){
                                that.dataTableKey = Date.now()
                                that.$message.success(res.message)
                            }else{
                                that.$message.warning(res.message)
                            }
                        })
                    }
                })
            }else{
                this.$message.warning('请先选择恢复项')
            }
        },
        resetPasswordClick(){//重置密码
            var that = this
            if(this.selectedRowKeysArr.length){
                this.$confirm({
                    title:'确认要重置密码吗？',
                    // icon: createVNode(ExclamationCircleOutlined),
                    onOk() {
                        jcyglresetPwd({ids:that.selectedRowKeysArr.join(',')}).then(res=>{
                            if(res.code == 200){
                                that.dataTableKey = Date.now()
                                that.$message.success(res.message)
                            }else{
                                that.$message.warning(res.message)
                            }
                        })
                    }
                })
            }else{
                this.$message.warning('请先选择重置密码项')
            }
        },
        async onChange(value, node){
            console.log('selectvalue',value)
            let res= []
            let arr = value.filter(a=>a.indexOf('&') == -1)
            let zjArr = value.filter(a=>a.indexOf('&') !== -1)
            if(arr.length && zjArr.length){
                arr.forEach((item,index)=>{
                    res.push({fj:item,zj:zjArr.filter(k=>k.indexOf(item) !== -1)})
                })
            }else if(arr.length){
                res = arr
            }else if(zjArr.length){
                let fjArr = []
                await zjArr.forEach((item,index)=>{
                    let i = item.split('&')
                    let dd = fjArr.filter(u=>u == i[0])
                    if(!dd.length){
                        fjArr.push(i[0])
                    }
                    
                })
                fjArr.forEach((item,index)=>{
                    res.push({fj:item,zj:zjArr.filter(k=>k.indexOf(item) !== -1)})
                })
            }
            console.log('最终结果',res)
            let resArr = res.map(i=>{return {fj:i.fj?i.fj:i,zj:i.zj && i.zj.length?i.zj.map(k=>{return k.split('&')[1]}):[]}})
            console.log('最终结果2',resArr)
            // res.map(a=>{ return a.fj+a.})
            this.flxRes = resArr.map(a=>{return a.zj.length?a.fj+'('+a.zj.join('、')+')':a.fj})
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
                flx:this.flxRes.length?this.flxRes.join(','):'',
            }
            this.$refs.acceptanceRegistrationRef.searchEvent()
        },
    }
}
</script>